<template>
  <div>
    <span class="title">{{vote.title}}</span>
    <div v-if="mode === 'vote'">
      <v-radio-group v-model="radioChoice" v-if="vote.type === 1">
        <v-radio
          color="blue"
          v-for="label in vote.options"
          :key="label"
          :label="label"
          :value="label"
        ></v-radio>
      </v-radio-group>
      <div v-else-if="vote.type === 2">
        <v-checkbox
          color="green"
          v-for="label in vote.options"
          :key="label"
          v-model="checkboxChoice"
          :label="label"
          :value="label"
        ></v-checkbox>
      </div>
      <v-divider></v-divider>
      <v-btn @click="handleSubmit" color="primary">{{$t('submit')}}</v-btn>
    </div>
    <div v-else>
      <div style="text-align: center"><v-icon color="green">check_circle</v-icon>已投票</div>
      <div class="title" style="text-align: center">投票结果 <span v-if="!showGraphic">已隐藏</span> </div>
      <bar-chart :data-set="graphic" v-if="showGraphic"></bar-chart>
    </div>
  </div>
</template>

<script>
  import BarChart from './components/BarChart'
  import { fetchVote, fetchBucket, createBucket, fetchResult } from '@/api/vote'
  export default {
    components: { BarChart },
    data: () => ({
      mode: 'vote',
      vote: {
        _id: '',
        title: '',
        type: 1,
        options: [],
        secret: true
      },
      radioChoice: '',
      checkboxChoice: [],
      results: []
    }),
    computed: {
      graphic() {
        return this.results.reduce((total, current) => {
          for (const item of current.data) {
            if (!total[item]) total[item] = 1
            else total[item]++
          }
          return total
        }, {})
      },
      enableManage() {
        return this.$store.getters.roles.some(v => (v === 'admin' || v === 'vote'))
      },
      showGraphic() {
        return !this.vote.secret || this.enableManage
      }
    },
    mounted() {
      const voteId = this.$route.params.voteId
      fetchBucket(voteId).then(res => {
        if (res.status === 204) {
          this.mode = 'vote'
          fetchVote(voteId).then(res => {
            this.vote = res.data
          })
        } else if (res.status === 200) {
          this.mode = 'graphic'
          if (!this.showGraphic) return
          fetchResult(voteId).then(res => {
            this.results = res.data.dataSet
          })
        }
      })
    },
    methods: {
      handleSubmit() {
        if (this.vote.type === 1 && this.radioChoice) {
          createBucket(this.vote._id, this.radioChoice).then(res => {
            if (res.status === 200) {
              this.$notify.success('投票成功')
              if (this.showGraphic) this.mode = 'graphic'
              else {
                fetchResult(this.vote._id).then(res => {
                  this.results = res.data.dataSet
                })
              }
            }
          })
        } else if (this.vote.type === 2 && this.checkboxChoice.length) {
          createBucket(this.vote._id, this.checkboxChoice).then(res => {
            if (res.status === 200) {
              this.$notify.success('投票成功')
              if (this.showGraphic) this.mode = 'graphic'
              else {
                fetchResult(this.vote._id).then(res => {
                  this.results = res.data.dataSet
                })
              }
            }
          })
        } else {
          this.$notify.warning('请先选择')
        }
      }
    }
  }
</script>

<style scoped>

</style>
